import 'package:calendar_date_picker2/calendar_date_picker2.dart';
import 'package:flutter/material.dart';

import '../button/commonpicker.dart';
import '../button/commonpicker_selectItem.dart';
import 'filterbar_data.dart';
import 'item.dart';

class FilterBar extends StatefulWidget {
  final ValueChanged<FilterBarResult>? onChange;

  FilterBar({this.onChange});

  @override
  State<FilterBar> createState() => _FilterBarState();
}

class _FilterBarState extends State<FilterBar> {
  bool isActivityTypeActive = false;
  bool isTimeActive = false;
  bool isSortedActive = false;
  bool isFilteredActive = false;

  String activityType = '';
  List<String> timeSpan = [];
  String sortedType = '';
  List<String> filters = [];

  final List<CommonPickerSelectItem> _pickerItems = [
    CommonPickerSelectItem(
        groupId: 1,
        groupName: '运动',
        options: ['游泳', '跑步', '徒步', '骑行', '篮球', '足球', '滑板', '篮球', '足球', '滑板'])
  ];

  _onActivityTypeChange(context) {
    setState(() {
      isActivityTypeActive = true;
    });
    CommonPicker.showPicker(context, _pickerItems);
    _onChange();
  }

  _onTimeChange(context) {
    CommonPicker.showCommonPicker(context, _buildCalendarWithActionButtons());
    _onChange();
  }

  _onSortedTypeChange(context) {
    CommonPicker.showSortPicker(context, _buildSortList());
    _onChange();
  }

  Widget _buildSortList(){

    return Container();
  }


  _onFiltersChange(context) {
    _onChange();
  }

  _onChange() {
    if (widget.onChange != null) {
      widget.onChange!(
          FilterBarResult(activityType: activityType, timeSpan: timeSpan));
    }
  }

  Widget _buildCalendarWithActionButtons() {
    final config = CalendarDatePicker2WithActionButtonsConfig(
        calendarType: CalendarDatePicker2Type.range,
        dayTextStyle: TextStyle(color: Colors.black),
        weekdayLabelTextStyle: TextStyle(color: Colors.black),
        controlsTextStyle: TextStyle(color: Colors.black),
        selectedRangeHighlightColor: Colors.blue[50],
        selectedDayHighlightColor: Colors.blue,
        disableModePicker: true,
        gapBetweenCalendarAndButtons: 0,
        buttonPadding:EdgeInsets.symmetric(horizontal: 10),
        cancelButton: TextButton(
          child: Text("重置"),
          onPressed: () {},
          style: ButtonStyle(
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
              RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(5.0),
              ),
            ),
            backgroundColor: MaterialStateProperty.all(Colors.grey),
            foregroundColor: MaterialStateProperty.all(Colors.white),
          ),
        ),
        okButton: TextButton(
          child: Text("确认"),
          onPressed: () {},
          style: ButtonStyle(
            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
              RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(5.0),
              ),
            ),
            backgroundColor: MaterialStateProperty.all(Colors.blue),
            foregroundColor: MaterialStateProperty.all(Colors.white),
          ),
        ),
    );
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          height: 35,
          margin: EdgeInsets.only(top: 10, left: 10),
          child: Row(
            children: [
              TextButton(
                  onPressed: () {},
                  child: Text("本月", style: TextStyle(color: Colors.black)),
                  style: ButtonStyle(
                      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                    RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(5.0),
                        side: BorderSide(
                            style: BorderStyle.solid, color: Colors.grey)),
                  ))),
              SizedBox(
                width: 10,
              ),
              TextButton(
                  onPressed: () {},
                  child: Text("两周内", style: TextStyle(color: Colors.black)),
                  style: ButtonStyle(
                      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                    RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(5.0),
                        side: BorderSide(
                            style: BorderStyle.solid, color: Colors.grey)),
                  ))),
              SizedBox(
                width: 10,
              ),
              TextButton(
                  onPressed: () {},
                  child: Text("本周", style: TextStyle(color: Colors.black)),
                  style: ButtonStyle(
                      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                    RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(5.0),
                        side: BorderSide(
                            style: BorderStyle.solid, color: Colors.grey)),
                  ))),
            ],
          ),
        ),
        CalendarDatePicker2WithActionButtons(
          config: config,
          value: _rangeDatePickerWithActionButtonsWithValue,
          onValueChanged: (dates) => setState(
              () => _rangeDatePickerWithActionButtonsWithValue = dates),
        ),
      ],
    );
  }

  String _getValueText(
    CalendarDatePicker2Type datePickerType,
    List<DateTime?> values,
  ) {
    values =
        values.map((e) => e != null ? DateUtils.dateOnly(e) : null).toList();
    var valueText = (values.isNotEmpty ? values[0] : null)
        .toString()
        .replaceAll('00:00:00.000', '');

    if (datePickerType == CalendarDatePicker2Type.multi) {
      valueText = values.isNotEmpty
          ? values
              .map((v) => v.toString().replaceAll('00:00:00.000', ''))
              .join(', ')
          : 'null';
    } else if (datePickerType == CalendarDatePicker2Type.range) {
      if (values.isNotEmpty) {
        final startDate = values[0].toString().replaceAll('00:00:00.000', '');
        final endDate = values.length > 1
            ? values[1].toString().replaceAll('00:00:00.000', '')
            : 'null';
        valueText = '$startDate to $endDate';
      } else {
        return 'null';
      }
    }
    return valueText;
  }

  List<DateTime?> _rangeDatePickerWithActionButtonsWithValue = [
    DateTime.now(),
    DateTime.now().add(const Duration(days: 5)),
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 41,
      decoration: BoxDecoration(
        color: Colors.white,
        // border: Border(bottom: BorderSide(color: Colors.black,width: 1))
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Item(
            tile: '运动类型',
            isActive: isActivityTypeActive,
            onTap: _onActivityTypeChange,
          ),
          Item(
            tile: '时间',
            isActive: isTimeActive,
            onTap: _onTimeChange,
          ),
          Item(
            tile: '时间优先',
            isActive:isSortedActive,
            onTap: _onSortedTypeChange,
          ),
          Item(
            tile: '筛选',
            isActive: false,
            onTap: (context) {},
          )
        ],
      ),
    );
  }
}
